<template>
  <div>
 <!-- 表格 -->
    <el-table
      :data="classList.records"
      style="width: 100%"
      text-align="center"
      height="180"
       highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      :header-cell-style="{ fontSize: '15px', color: 'rgb(83, 79, 79)' }"
      border
    >
      <el-table-column fixed prop="className" label="小班名称">
      </el-table-column>
      <el-table-column prop="classMan" label="负责人">
      </el-table-column>
      <el-table-column prop="classManTel" label="负责人电话">
      </el-table-column>
      <el-table-column prop="areaBean.areaName" label="负责区域" >
      </el-table-column>
    </el-table>

    

    <!-- 页码 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="classList.pages * 10"
      @click="get()"
      @current-change="handleChange"
      style="margin-left: 100px; margin-bottom: 100px"
    >
    </el-pagination>

<!-- 添加小班 -->
    <div style="text-align: left">
      <el-button
        type="info"
        @click="dialogFormVisible = true"
        style="
          width: 100px;
          margin-right: 30px;
          margin-left: 70px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >添加小班</el-button
      >
      <el-dialog
        title="添加小班"
        :visible.sync="dialogFormVisible"
        width="60%"
        custom-class="customClass"
      >
        <div style="display: flex" class="msg">
          <div>
            <p style="margin: 50px 30px">
              名称：<input type="text" v-model="className" />
            </p>
            <p style="margin: 50px 30px">
              负责人电话：<input type="text" v-model="classManTel" />
            </p>
            <p style="margin: 50px 30px">
              负责区域：<select v-model="areaId">
                <option value="1">雅林一号地区</option>
                <option value="2">雅林二号地区</option>
                <option value="3">卧龙自然保护区</option>
                <option value="4">泡桐一号地区</option>
              </select>
            </p>
          </div>
          <div>
            <p style="margin: 50px 30px">
              负责人：<input type="text" v-model="classMan" />
            </p>
            <p style="margin: 50px 30px">
              人员数量：<input type="text" v-model="classManNum" />
            </p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addClass()">确 定</el-button>
        </div>
      </el-dialog>


      <!-- 查看详细信息 -->
      <el-button
        type="info"
        @click="findId(classId)"
        style="
          width: 107px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
          margin-left:20px;
        "
        size="small"
        plain
        >查看详细信息</el-button
      >
      <el-dialog
        title="小班详细信息"
        :visible.sync="dialogVisible"
        width="650px"
        :before-close="handleClose"
      >
        <div class="msg" style="display: flex">
          <div style="width: 400px">
            <p style="margin: 50px 30px">名称：{{ list.className }}</p>
            <p style="margin: 50px 30px">负责人电话： {{ list.classManTel }}</p>
            <p style="margin: 50px 30px">负责区域：{{ areaName }}</p>
            <p style="margin: 50px 30px">地类:{{ areaType }}</p>
            <p style="margin: 50px 30px">创建时间：{{ list.classTime }}</p>
          </div>
          <div style="width: 400px; ">
            <p style="margin: 50px 30px">负责人：{{ list.classMan }}</p>
            <p style="margin: 50px 30px">人员数量:{{ list.classManNum }}</p>
            <p style="margin: 50px 30px">林种：{{ areaSeed }}</p>
           <p style="margin: 50px 30px">优势树种：{{ areaEx }}</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog><br>



      <!-- 修改小班信息 -->
       <div>
        <el-button
        type="info"
        @click="findId2(classId)"
        style="
          width: 107px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
          margin-left:70px;
          margin-top:35px;
        "
        size="small"
        plain>修改小班信息
        </el-button>
        <el-dialog
        title="修改小班信息"
        :visible.sync="dialogVisibleUpdate"
        width="650px"
        :before-close="handleClose"
      >
          <div class="msg" style="display: flex">
          <div style="width: 400px">
            <p style="margin: 50px 30px">名称：{{ list.className }}</p>
            <p style="margin: 50px 30px">负责人电话： <input type="text" v-model="classManTel" /></p>
            <p style="margin: 50px 30px">负责区域：{{ areaName }}</p>
            <p style="margin: 50px 30px">地类:{{ areaType }}</p>
            <p style="margin: 50px 30px">创建时间：{{ list.classTime }}</p>
          </div>
          <div style="width: 400px; ">
            <p style="margin: 50px 30px">负责人：<input type="text" v-model="classMan" /></p>
            <p style="margin: 50px 30px">人员数量:{{ list.classManNum }}</p>
            <p style="margin: 50px 30px">林种：{{ areaSeed }}</p>
           <p style="margin: 50px 30px">优势树种：{{ areaEx }}</p>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
          <el-button type="primary" @click="updateClass(classId)">确 定</el-button >
        </span>
      </el-dialog>
       </div>

       <!-- 模糊查询 -->
      <session>
        <div style="margin-left:400px;margin-bottom:70px">
          <fieldset style="width: 200px">
            <legend>查询小班信息</legend>
            <form action="" style="width: 260px">
              小&nbsp;班&nbsp;名&nbsp;称
              <input type="text" v-model="className" style="margin-top: 20px"/><br>
               负&nbsp;责&nbsp;区&nbsp;域
              <input type="text" v-model="areaName" style="margin-top: 20px"/><br>
              <br />
              <input
                type="button"
                value="查询"
                @click="get()"
                style="margin-left: 140px"
              />
            </form>
          </fieldset>
        </div>
      </session>


    </div>

  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
  data(){
    return{
      dialogFormVisible: false,
      dialogVisible: false,
      dialogVisibleUpdate:false,
      formLabelWidth: "70px",
      classId:"",
      className:"",//名称
      classMan:"",//负责人
      classManTel:"",//负责人电话
      classManNum:"",//人员数量
      areaName:"",//负责区域
      classTime:"",//创建时间
      list:[],
      areaType:"",
      areaId:"",

      areaSeed:"",
      areaEx:"",
    }
  },
 computed:{
    ...mapState("area",["classList","classParam"]),
  },
  methods:{
    ...mapMutations("area",["setClassParam"]),
    ...mapActions("area",["findAllClass"]),
    ...mapActions("area",["findClassName"]),
     async addClass(){
       let parmaObj = {
        className: this.className,
        classMan: this.classMan,
        classManTel: this.classManTel,
        classManNum: this.classManNum,
        areaName:this.areaName,
      };
      let info = await this.ajax.getSubmit("/api/class/addClass", parmaObj);
      console.log(info);
      if (info != null) {
        alert("添加成功！");
      } else {
        alert("不能为空！");
      }
      this.dialogFormVisible = false;
      this.findAllClass();
     },
     async findId(classId) {
      let paramObj = { classId: this.classId };
      let info = await this.ajax.getSubmit("/api/class/findId", paramObj);
      console.log(info);
      this.list = info;
      this.areaName = info.areaBean.areaName
      this.areaType = info.areaBean.areaType
      this.areaSeed = info.areaBean.areaSeed
      this.areaEx = info.areaBean.areaEx
      this.dialogVisible = true;
    },
    async findId2(classId) {
      let paramObj = { classId: this.classId };
      let info = await this.ajax.getSubmit("/api/class/findId", paramObj);
      console.log(info);
      this.list = info;
      this.areaName = info.areaBean.areaName
      this.areaType = info.areaBean.areaType
      this.areaSeed = info.areaBean.areaSeed
      this.areaEx = info.areaBean.areaEx
      this.dialogVisibleUpdate = true;
    },
    // 修改小班信息
    async updateClass(classId){
      let paramObj = {classId:this.classId,classMan:this.classMan,classManTel:this.classManTel}
      let info = await this.ajax.getSubmit("/api/class/updateClass",paramObj)
      console.log(info)
      this.list = info
      this.dialogVisibleUpdate = false
      this.findAllClass()
    },
    get() {
      let paramObj = this.classParam;
      paramObj.className = this.className;
      paramObj.area = this.area;
      // 把最新的信息装入 store中的 param对象中
      this.setClassParam(paramObj);
      this.findClassName()
    },
     handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    cut(pageNo) {
      let paramObj = this.classParam;
      paramObj.pageNo = pageNo;
      this.setClassParam(paramObj);
      this.findAllClass();
    },
    handleTableRow(row) {
      console.log(row.classId);
      this.classId = row.classId;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }

  },
  created(){
    this.findAllClass()
    console.log(this.classList.records)
  }
}
</script>

<style>
/* div > div > session:first-child {
  position: relative;
}
div>div>session:first-child>div:first-child{
  position: absolute;
  left: 400px;
} */
/* div > div > session > div:first-child {
  position: absolute;
  left: 330px;
  bottom: -75px;
} */
</style>